<template>
  <el-container class="el-main-container">
    <el-aside class="sidebar">
      <el-menu class="el-custom-menu" :default-active="currentPath" :default-openeds="defaultOpeneds" router>
        <el-submenu v-for="item in menuItems" :key="item.index" :index="item.index">
          <template #title>
            <i :class="item.icon"></i>
            {{ item.title }}
          </template>
          <el-menu-item v-for="child in item.children" :key="child.index" :index="child.index">
            <i :class="child.icon"></i>
            {{ child.title }}
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
  </el-container>
</template>

<script>
import {permissionsByToken} from "@/http/common/get";

export default {
  data() {
    return {
      // 存储处理后的菜单数据
      menuItems: []
    }
  },
  mounted() {
    // 监听登录成功事件
    this.$root.$on('login-successful', this.fetchMenuData);
    this.fetchMenuData() // 这个调用保证 开发时ctrl+s 不会刷新掉权限
  },
  computed: {
    currentPath() {
      return this.$route.path; // 动态获取当前路由路径
    },
    defaultOpeneds() {
      return this.menuItems.map(item => item.index);
    }
  },
  methods: {
    async fetchMenuData() {
      try {
        const data = localStorage.getItem('menuData');
        if (!data) {
          const response = await this.fetchMenu(); // 调用后端接口获取权限
          localStorage.setItem('menuData', JSON.stringify(response.data));
          this.processMenuData(response.data);
        } else {
          this.processMenuData(JSON.parse(data));
        }
      } catch (error) {
        console.error('获取菜单数据失败:', error);
      }
    },
    async fetchMenu() {
      const token = localStorage.getItem('token');
      return permissionsByToken(token).then(res => {
        if (res.data.code == 200) {
          return res.data;
        }
      })
    },
    beforeDestroy() {
      // 清理事件监听器，避免内存泄漏
      this.$parent.$off('login-successful', this.fetchMenuData);
    },
    processMenuData(data) {
      // 假设data是获取到的权限数据数组
      const menuData = [];
      data.forEach(item => {
        if (item.parentId === 0) {
          // 是主菜单
          const menuItem = {
            index: String(item.index),
            icon: String(item.icon),
            title: item.name,
            children: []
          };
          data.forEach(subItem => {
            if (subItem.parentId === item.id) {
              // 是当前主菜单的子菜单
              menuItem.children.push({
                index: subItem.index,
                icon: String(subItem.icon),
                title: subItem.name
              });
            }
          });
          menuData.push(menuItem);
        }
      });
      this.menuItems = menuData;
    }
  }
};
</script>

<style scoped>
.el-main-container {
  border: 1px solid #eee;
  height: 800px;
}

.sidebar {
  background-color: #f7f7f7; /* 柔和的灰色 */
}

.el-custom-menu {
  background-color: #f7f7f7;
  color: #333; /* 深灰色文本 */
}

.el-menu-item:hover {
  background-color: #e6e6e6; /* 悬停时的背景色 */
  color: #333; /* 为了确保文本在悬停时依旧清晰可见 */
}

.el-menu-item.is-active {
  color: #ffa500; /* 激活状态的橙色文本 */
}

/* Element UI 默认的active样式可能需要覆盖 */
.el-menu-item.is-active:not(.is-disabled) {
  background-color: #ffe5b4; /* 激活状态的背景色，淡橙色 */
}
</style>
